<template>
	<view class="setting-container">
		<common-head title="编辑地块" :autoBack="true"></common-head>
		<view class="dk-head flex-between">
			<text class="label-txt">地块基本信息</text>
			<text class="num-txt">{{baseData.dkbm}}</text>
		</view>
		<view class="dk-info">
			<view class="info-content">
				<view class="info-item flex-normal">
					<text class="label-txt width">地块名称：</text>
					<text class="val-txt">{{baseData.dkmc}}</text>
				</view>
				<view class="info-item flex-normal">
					<text class="label-txt width">确权面积：</text>
					<text class="val-txt">{{baseData.htmjm}}/亩</text>
				</view>
			</view>
			<view class="info-item-sz flex-normal ellipsis-1">
				<text class="label-txt">东至：</text>
				<text class="val-txt ellipsis-1">{{baseData.dkdz}}</text>
			</view>
			<view class="info-item-sz flex-normal ellipsis-1">
				<text class="label-txt">南至：</text>
				<text class="val-txt ellipsis-1">{{baseData.dknz}}</text>
			</view>
			<view class="info-item-sz flex-normal ellipsis-1">
				<text class="label-txt">西至：</text>
				<text class="val-txt ellipsis-1">{{baseData.dkxz}}</text>
			</view>
			<view class="info-item-sz flex-normal">
				<text class="label-txt">北至：</text>
				<text class="val-txt ellipsis-1">{{baseData.dkbz}}</text>
			</view>
			<view class="sfgy-content flex-normal">
				<text class="sfgy-label">是否共有地块：</text>
				<text class="val-txt">{{baseData.sfqqqg | num2Str('elyb_yesno', dictsList)}}</text>
				<view class="sfgy-btn flex-center" @click="getListCbdkGyqk" v-if="baseData.sfqqqg == '1'">
					<text class="btn-txt">查看共有情况</text>
				</view>
			</view>
		</view>
		<view class="farm-content">
			<view class="form-item">
				<rh-radio 
				label="地块信息是否正确" 
				v-model="baseData.dkxxsfzq" 
				:radioList="getDictItem('elyb_yesno')" 
				inputAlign="right">
				</rh-radio>
			</view>
			<template v-if="baseData.dkxxsfzq == '2'">
				<view class="form-item">
					<u-checkbox-group
					 v-model="baseData.isMjcw"
					size="44">
						<u-checkbox
						activeColor="#22984E"
						iconSize="32" labelSize="32" name="1"
						label="面积错误"></u-checkbox>
					</u-checkbox-group>
				</view>
				<template v-if="baseData.isMjcw.length">
					<view class="form-item">
						<rh-input
						label="修改后面积" 
						placeholder="请输入修改后面积" 
						v-model="baseData.mjcw" 
						inputAlign="right">
							<template #icon>
								<text class="unit-txt">/亩</text>
							</template>
						</rh-input>
					</view>
				</template>
				<view class="form-item">
					<u-checkbox-group
					 v-model="baseData.isSxcw"
					size="44">
						<u-checkbox 
						activeColor="#22984E"
						iconSize="32" labelSize="32" name="1"
						label="属性错误"></u-checkbox>
					</u-checkbox-group>
				</view>
				<template v-if="baseData.isSxcw.length">
					<view class="form-item">
						<rh-input
						v-model="baseData.sxcw"
						placeholder="请输入请简单描述错误内容" 
						maxlength="200"
						type="textarea">
						</rh-input>
					</view>
				</template>
			</template>
			<view class="form-item">
				<rh-radio
				label="是否流转" 
				v-model="baseData.sflz" 
				:radioList="getDictItem('elyb_yesno')" 
				inputAlign="right">
				</rh-radio>
			</view>
			<template v-if="baseData.sflz == '1'">
				<view class="form-item">
					<rh-input
					label="流转地块面积" 
					placeholder="请输入流转地块面积" 
					v-model="baseData.lzmjm" 
					inputAlign="right">
						<template #icon>
							<text class="unit-txt">/亩</text>
						</template>
					</rh-input>
				</view>
			</template>
			
			<view class="form-item">
				<rh-radio
				label="是否流失" 
				v-model="baseData.sfls" 
				:radioList="getDictItem('elyb_yesno')" 
				inputAlign="right">
				</rh-radio>
			</view>
			<template v-if="baseData.sfls == '1'">
				<view class="form-item">
					<rh-picker 
					label="流失类型" 
					v-model="baseData.lslx" 
					:columns="getDictItem('elyb_lslx')" 
					picker-title="选择流失类型" 
					placeholder="请选择流失类型">
					</rh-picker>
				</view>
				<view class="form-item">
					<rh-input
					label="流失地块面积" 
					placeholder="请输入流失地块面积" 
					v-model="baseData.lsmjm" 
					inputAlign="right">
						<template #icon>
							<text class="unit-txt">/亩</text>
						</template>
					</rh-input>
				</view>
			</template>
			
		</view>
		<rh-submit-btn ref="submit-btn" text="确认提交" @submit="submit"></rh-submit-btn>
		
		<rh-alert ref="rh-alert">
			<template>
				<view class="gydk-content">
					<view class="gydk-item">
						地块编码： {{2222}}
					</view>
					<view class="gydk-item">
						确权面积： {{2222}}/亩
					</view>
				</view>
				<view class="gydk-list">
					<view class="g-item flex-column">
						<text class="g label-txt">共同地块承包方名称：{{22}}</text>
						<text class="g val-txt">分摊面积：{{33}}/亩</text>
					</view>
					<view class="g-item flex-column">
						<text class="g label-txt">共同地块承包方名称：{{33}}</text>
						<text class="g val-txt">分摊面积：{{77}}/亩</text>
					</view>
				</view>
			</template>
		</rh-alert>
	</view>
</template>

<script>
	import { queryParams,
		validateIDCard, validatePhone
	} from '@/script/tools.js'
	import { updateCbdk, detailCbdk, listCbdkGyqk } from '@/script/api/cbdk/index.js'
	export default {
		data() {
			return {
				routeParam: {},
				baseData: {},
				dictsList: [
					// 数据字典
					{
						label: "流失类型",
						name: "elyb_lslx",
						child: []
					},
					{
						label: "是否",
						name: "elyb_yesno",
						child: []
					}
				]
			}
		},
		filters: {
			num2Str(num, name, list) {
			  let dict = list.find((i) => i.name == name);
			  if (!dict) return "--";
			  let item = dict["child"].find((i) => i.dictValue == num);
			  if (!item) return "---";
			  return item["dictLabel"];
			},
		},
		onLoad(e) {
			let _self = this
			_self.routeParam = e
			_self.getDetailCbdk(e)
			_self.initGetDicts()
		},
		methods: {
			getListCbdkGyqk(){
				let _self = this
				uni.navigateTo({
					url: `/pages/appMain/dk-gy-list${queryParams(_self.routeParam)}`
				})
			},
			getDetailCbdk(routeParam){
				let _self = this
				detailCbdk(routeParam).then(res => {
					const {dkxxsfzq, mjcw, sxcw } = res.data
					_self.baseData = res.data
					// 地块信息是否正确
					if(dkxxsfzq == '2'){
						_self.$set(_self.baseData, 'isMjcw', mjcw == '1' ? ['1'] : [])
						_self.$set(_self.baseData, 'isSxcw', (sxcw && sxcw != '') ? ['1'] : [])
					}
				})
			},
			getDictItem(name){
				let _self = this
				let dict = _self.dictsList.find(i => i.name == name)
				return dict.child
			},
			submit() {
				let _self = this, el = this.$refs['submit-btn']
				updateCbdk(_self.baseData).then(res => {
					_self.$attention.noIcon(res.msg)
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
						})
					}, 1000)
				}).finally(() => el['submit_loading'] = false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.setting-container{
		font-weight: 500;
		min-height: 100vh;
		background: #f8f8f8;
		padding-bottom: 200rpx;
		.gydk-content{
			// background-color: ;
			.gydk-item{
				margin-bottom: 16rpx;
				@include fontStyle(#111, 32rpx);
			}
		}
		.gydk-list{
			.g-item{
				border-bottom: 2rpx solid #f4f4f5;
				padding-bottom: 16rpx;
				.g{
					margin-bottom: 16rpx;
					&:last-child{
						margin-bottom: 0;
					}
				}
				.label-txt, .val-txt{
					@include fontStyle(#111, 32rpx);
				}
			}
		}
		.farm-content{
			margin-top: 30rpx;
			background-color: #fff;
		}
		.form-item{
			padding: 30rpx 24rpx 30rpx 54rpx;
			background: #fff;
			.form-label{
				font-size: 26rpx;
				color: #333;
			}
		}
		.dk-head{
			padding: 20rpx 30rpx;
			.label-txt{
				@include fontStyle(#111, 36rpx);
			}
			.num-txt{
				@include fontStyle(#999, 28rpx, 400);
			}
		}
		.dk-info{
			margin: 0 30rpx;
			border-radius: 16rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
			.info-content{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				column-gap: 20rpx;
				.label-txt{
					width: 160rpx;
					@include fontStyle(#111, 32rpx);
				}
				.val-txt{
					@include fontStyle(#111, 32rpx);
				}
			}
			.info-item-sz{
				margin-top: 30rpx;
				.label-txt{
					@include fontStyle(#111, 32rpx);
				}
				.val-txt{
					@include fontStyle(#111, 32rpx);
				}
			}
			.sfgy-content{
				margin-top: 30rpx;
				.sfgy-label{
					@include fontStyle(#111, 32rpx);
				}
				.val-txt{
					@include fontStyle(#111, 32rpx);
				}
				.sfgy-btn{
					margin-left: 16rpx;
					height: 48rpx;
					padding: 0 20rpx;
					border-radius: 16rpx;
					background: rgba(43, 133, 228, .3);
					.btn-txt{
						@include fontStyle(#2b85e4, 32rpx, 500);
					}
				}
			}
		}
	}
</style>
